/**Created by liaoyingchao on 2019-07-19.*/

<template>
  <div class="appInfo" v-if="icon">
    <div class="icon">
      <img :src="icon">
    </div>
    <div class="info">
      <p class="title">{{name}}</p>
      <p>版本：{{version}}</p>
      <p :class="timeWarning()">更新：{{$util.getFormatTime(time)}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "appInfo",
    components: {},
    props: {
      icon: {
        type: String,
        default: ''
      },
      name: {
        type: String,
        default: ''
      },
      version: {
        type: String,
        default: ''
      },
      time: {
        type: String,
        default: ''
      },
    },
    data() {
      return {}
    },
    methods: {
      timeWarning: function () {
        if (parseInt(this.time) + 60*24*3600*1000 < (new Date()).getTime()) {
          return 'warning-2'
        } else if (parseInt(this.time) + 20*24*3600*1000 < (new Date()).getTime()) {
          return 'warning-1'
        }
        return false
      }
    },
    created() {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped type="text/stylus">
  .appInfo {
    padding 5px 0;
    overflow hidden
    display flex;
    align-items center;
    .icon {
      img {
        display block;
        width 60px;
        height 60px;
      }
    }
    .info {
      flex 1;
      .title {
        font-size 15px;
        color black;
      }
      p {
        padding 0px 10px;
      }
      .warning-1 {
        color #ffc50e;
      }
      .warning-2 {
        color red;
      }
    }
  }
</style>